<template>
  <div class="car">
    <top-header :isLeft="false" title="购物车"></top-header>
    <div class="top">
      <p @click="bianji1()" v-if="show4 == 1">完成</p>
      <p @click="bianji()" v-else>编辑</p>
     </div>
     <div class="content">
     <div v-for="(item,index) in goodList" :key="index">
     <div class="content1">
        <i class="iconfont" @click="xuanzhong4(item)" style="color:red" v-if="show1 == 1">&#xe653;</i><i class="iconfont" @click="xuanzhong1(item)" v-else>&#xe60c;</i>
        <div class="storename">
           <i class="iconfont">&#xeb53;</i>
           <p>{{item.store}}></p>
        </div>
     </div>
     <div class="content2" >
       <div class="icon"><i class="iconfont" @click="xuanzhong3(item)" style="color:red" v-if="show2 == 1 || item.type == 0">&#xe653;</i> <i class="iconfont" @click="xuanzhong2(item)" v-else>&#xe60c;</i></div>
       <img :src="getImage(url+item.goodimg)" alt="">
       <div class="title1">
       <p>{{item.title}}</p>
       <p>{{item.goodname}}</p>
       <div class="num">  
          <p class="shoujia"><span>￥</span>{{item.goodprice}}</p>
           <el-input-number size="mini" v-model="item.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number></div>
       </div>
     </div>
     <div class="content3"><p>已享包邮</p></div>
    </div>
    </div>
    <div class="foot">  <div class="footer">
      <div class="left">
        <i class="iconfont"  @click="quanxuan1()" style="color:red" v-if="show3 == 1">&#xe653;</i>
         <i class="iconfont" @click="quanxuan()" v-else>&#xe60c;</i>
         <p>全选</p>
      </div>
      <div class="right1" v-if="show4 == 1">
        <button @click="del()">删除</button>
      </div>
      <div class="right" v-else>
        <div class="jiage">
       <p class="jiage1">合计:<span>￥{{price}}</span></p>
        <p>不含运费</p>
        </div>
        <button @click="buy()">结算</button>
      </div>
      
     
    </div></div>
  
  </div>
</template>

<script>
import TopHeader from '../components/TopHeader.vue'
import { Dialog } from 'vant';
export default {
  components: { TopHeader },
  data() {
    return {
        url:'https://i2.chuimg.com/',
      goodList:'',
     num: 1,
     show1:'',
     show2:'',
     show3:'',
     show4:'',
     price:0,
     goodmessage:{
       goodname:'',
     store:''
     }
     
    };
  },
  created() {
    this.show()
  },
  methods:{
     getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    handleChange(value) {
        console.log(value);
      },
      show(){
        this.$ajax.get('/mysql/shoppingselect.php',{
          params:{
            id:localStorage.id
          }
        }).then((res)=>{
          console.log(res.data)
          this.goodList = res.data
        })
      },
      bianji(){
        this.show4 = 1
      },
      bianji1(){
        this.show4 = 0
      },
      xuanzhong1(item){
        this.show1 = 1
        this.show2=1
       item.type = 0
        console.log(item.store)
        this.goodmessage.store = item.store
        this.$ajax.get('/mysql/shoppingwhere.php',{
          params:{
            store:item.store
          }
        }).then((res)=>{
          console.log(res)
          var arr = res.data
          arr.forEach(i => {
            this.price = +i.goodprice*i.num+ + this.price
            console.log(this.price)
          });
 
        })
        
      },
      xuanzhong2(item){
    this.goodmessage.goodname = item.goodname
    console.log(item.goodname)
        this.$ajax.get('/mysql/shoppingwhere.php',{
          params:{
            store:item.store
           
          }
        }).then((res)=>{
          console.log(res)
        if(res.data.length == 1){
          item.type = 0
          this.show1 = 1
        var arr2 = res.data
        arr2.some((i)=>{
          this.price = +i.goodprice*i.num+ + this.price
        })
        }
        if(res.data.length>1){
          item.type = 0
          this.$ajax.get('/mysql/shoppinggoodname.php',{
            params:{
              goodname:item.goodname
            }
          }).then((res)=>{
            console.log(res)
          var arr3 = res.data
          arr3.forEach(i=>{
            this.goodmessage.goodname = i.goodname
             this.price = +i.goodprice*i.num+ + this.price
          })

          })
        }
        })
      },
      xuanzhong3(item){
        item.type = 1
            this.$ajax.get('/mysql/shoppinggoodname.php',{
            params:{
              goodname:item.goodname
            }
          }).then((res)=>{
            console.log(res)
          var arr3 = res.data
          arr3.forEach(i=>{
            console.log(i.price)
           this.price = this.price - i.goodprice*i.num
          })

          })
      },
      xuanzhong4(item){
        this.show1 = 0
        this.show2 = 0
        item.type = 1
          this.$ajax.get('/mysql/shoppingwhere.php',{
          params:{
            store:item.store
          }
        }).then((res)=>{
          console.log(res)
          var arr = res.data
          arr.forEach(i => {
            this.price =  this.price - i.goodprice*i.num
        
          });
 
        })
      },
      quanxuan(){
      this.show1 = 1
      this.show2 = 1
      this.show3 = 1
      this.$ajax.get('/mysql/shoppingselect.php',{
        params:{
          id:localStorage.id
        }
      }).then((res)=>{
         var arr = res.data
          arr.forEach(i => {
            this.price = +i.goodprice*i.num+ + this.price
            console.log(this.price)
          });
      })
      },
       quanxuan1(){
      this.show1 = 0
      this.show2 = 0
      this.show3 = 0
      this.price = 0
      },
      del(){
        console.log(this.goodmessage.store)
        console.log(this.goodmessage.goodname)
        Dialog.confirm({
  title: '提示',
  message: '您确定要删除吗？',
})
  .then(() => {
      this.$ajax.get('/mysql/shoppingdel.php',{
          params:{
            store:this.goodmessage.store,
            goodname:this.goodmessage.goodname
          }
        }).then((res)=>{
          console.log(res)
          this.$router.go(0)
        })
  })
  .catch(() => {
    return false;
  });
      
      },
      buy(){
        console.log(this.goodmessage.goodname)
        // this.$store.dispatch('getgoodmessage',this.goodmessage)
        this.$router.push({name:'Buy',
        query:{
          goodname:this.goodmessage.goodname,
          store:this.goodmessage.store
        }})
      }
  }


}

</script>
<style lang="scss" scoped>
  .top{
    margin-top: 70px;
    display: flex;
    flex-direction: row-reverse;
    
    p{
      margin-right: 10px;
      color: red;
    font-size: 18px;
    }
  }
  .content{
    margin-bottom: 150px;
  }
  .content1{
    margin-left: 10px;
    display: flex;
    i{
      font-size: 22px;
    }
    .storename{
      margin-left: 10px;
      display: flex;
      p{
        font-size: 22px;
      }
    }
  }
  .content2{
    .icon{
      display: flex;
      align-items: center;
      i{
       
      font-size: 22px;
    }
    }
    
    margin: 0 10px 0 10px;
    height: 140px;
    display: flex;
    justify-content: space-around;
    .title1{
      .num{
        display: flex;

      }
      .shoujia{
           color: red;
           margin-right: 20px;
         }
      p{
          display: flex;
        flex-wrap:wrap
      }
    }
    i{
      font-size: 22px;
    }
    img{
      margin-left: 10px;
      margin-right: 10px;
      width: 120px;
      height: 120px;
    }
  }
  .content3{
    font-size: 18px;
    margin-left: 20px;
  }
  .foot{
    z-index: 1000;
    background: white;
    width: 100%;
    position:fixed;
    bottom: $tabbar-height;
  }
  .footer{

    display: flex;
    justify-content: space-between;
    text-align: center;
    .left{
      display: flex;
      align-items: center;
      i{
        font-size: 22px;
      }
      p{
        margin-left: 10px;
        font-size: 18px;
        margin-bottom: 0;
      }
    }
    .right{
      display: flex;
      .jiage{
        .jiage1{ 
          padding-right: 10px;
          color: red;
        
          span{
            margin-left: 10px;
          }
        }
          p{
            margin-bottom: 0;
          }
      }
      button{
          width: 120px;
          border: white;
          background-color: orangered;
          color: white;
        }
    }
  }
  .right1{
    button{
   width: 120px;
   height: 41px;
          border: white;
          background-color: orangered;
          color: white;
    }
  }
</style>